<template>
  <c-dialog title="模态框名字" v-model="showDeaile" width="90%">
    <c-forms :model="dialogFormData" :rules="dialogRules" ref="dialogForm">
      <c-formitems :form-data="dialogFormData" v-for="item in dialogFormItems" :key="item.value" :config="item"></c-formitems>
    </c-forms>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogCancel">取 消</el-button>
        <el-button type="primary" @click="dialogOk">确 定</el-button>
      </span>
    </template>
  </c-dialog>
</template>
<script setup>
import { reactive, ref, defineProps, defineEmit, useContext, computed } from 'vue'
import { JSONCopy } from '@components/js/utile.js'
const { expose } = useContext()
let props = defineProps({
  showDeaile: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmit(['updata', 'close'])
// let disabled = ref(false)
let dialogFormData = reactive({
  name: '',
  sex: '',
  addr: '',
  aliasName: '',
})
let dialogFormItems = computed(() => {
  return [
    { type: 'input', label: '姓名', value: 'name', disabled: props.disabled },
    { type: 'input', label: '别名', value: 'aliasName', disabled: props.disabled },
    { type: 'number', label: '年龄', value: 'sex', disabled: props.disabled },
    { type: 'input', label: '地址', value: 'addr', disabled: props.disabled },
  ]
})
let dialogRules = reactive({})
let dialogForm = ref(null)
function dialogOk() {
  dialogForm.value
    .validate()
    .then(() => {
      emit('updata', JSONCopy(dialogFormData))
      dialogCancel()
    })
    .catch(() => {
      console.log('不通过')
    })
}
function dialogCancel() {
  dialogForm.value.resetFields()
  //   disabled.value = false
  emit('close')
}
function setDialogForm(data, isDisabled) {
  //   disabled.value = isDisabled
  Object.assign(dialogFormData, data)
}
expose({ setDialogForm })
</script>
